import React, { Component } from 'react';
import { connect } from 'dva';
import { Button, message } from 'antd';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DetailInfor from './DetailInfor';
import ServiceRemark from '../../components/ServiceRemark';

@connect(({ accuservicehandle: { detail, detailHdl }, loading }) => ({
  detail,
  detailHdl,
  loading: loading.models.accuservicehandle,
}))
class BasicProfile extends Component {
  state = {
    visHdlRemark: false,
  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const { accuSerHdlId } = location.query;
    dispatch({
      type: 'accuservicehandle/fetchDetail',
      payload: { accuSerHdlId },
    });
  }

  // 模态框显隐
  handleModalVisible = flag => {
    this.setState({
      visHdlRemark: !!flag,
    });
  };

  // 提交数据
  submitData = values => {
    const { dispatch, location } = this.props;
    const { accuSerHdlId } = location.query;
    dispatch({
      type: 'accuservicehandle/addHdlRemarkDel',
      payload: { ...values, busiId: accuSerHdlId },
      callback: response => {
        if (response.success) {
          message.success('办理备注成功！');
          this.handleModalVisible();
        } else {
          message.warning(`${response.message || '办理备注失败！'}`);
        }
      },
    });
  };

  // 办理备注
  hdlRemark = () => {
    const { dispatch, location } = this.props;
    const { accuSerHdlId } = location.query;
    this.handleModalVisible(true);
    dispatch({
      type: 'accuservicehandle/detailHdlRemark',
      payload: { busiId: accuSerHdlId },
    });
  };

  close = () => {
    const { location } = this.props;
    const { pathname } = location;
    const tempUrl = pathname.split('/detail')[0];
    router.push(`${tempUrl}/index`);
  };

  render() {
    const { detail, loading, detailHdl } = this.props;
    const { accuSerHdl, remarklist, accuRefundInfo } = detail;
    const { visHdlRemark } = this.state;
    return (
      <PageHeaderWrapper>
        <DetailInfor
          detail={detail}
          hdlVo={accuSerHdl}
          insRemark={remarklist}
          refundInfo={accuRefundInfo}
          loading={loading}
        />
        <ServiceRemark
          visHdlRemark={visHdlRemark}
          handleModalVisible={this.handleModalVisible}
          submitData={this.submitData}
          detailHdl={detailHdl}
        />
        <FooterToolbar style={{ width: '100%' }}>
          {accuSerHdl.updateJurisdFlag !== 2 ? (
            <Button onClick={this.hdlRemark} style={{ marginRight: 8 }}>
              添加办理备注
            </Button>
          ) : null}
          <Button onClick={() => router.goBack()}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
export default BasicProfile;
